<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui">
    <body>
        <ui:composition template="/WEB-INF/templates/template.xhtml">     
        <style type="text/css">
            .ui-datepicker{ font-size: 9pt;} .ui-button{font-size: 12pt;}
            .ui-tabs{font-size: 12px;} .ui-tabs-panel{font-size: 12px;} .ui-tabs-panel{font-size: 12px;} 
            .ui-toolbar-group-left{font-size: 12px} 
            .ui-datatable .ui-datatable-header {
                        text-align: left;
                    }
        </style>
        <ui:define name="toolbar">
            <h:form id="formToolbarHorma" >
                <p:panel  id="hormaToolbarPanel" visible="true" closeSpeed="300" closable="true" closeTitle="Cerrar" header="Gestión de Hormas: nombre del componente ingreso consulta"  style="font-size: 12px; border-width: 0px">

                    <p:toolbar  id="toolOpcionesHorma" >
                        <p:toolbarGroup align="left" >
                            <p:commandButton id="botonNuevoHorma" update=":formDialogoIngresarHorma" oncomplete="dialogoIngresoHorma.show()"  type="push" title="Nuevo Tipo de Horma" icon="ui-icon-document" />
                            <p:separator />                            
                            <p:commandButton id="botonModificarHorma" type="push" title="Actualizar Tipo de Horma" icon="ui-icon-arrowrefresh-1-w" actionListener="#{hormaWeb.clicBotonModificarHorma()}" update=":formDialogoModificarHorma"  oncomplete="dialogoModificarHorma.show()" />                
                            <p:commandButton type="push" title="Eliminar Tipo de Horma" icon="ui-icon-trash" oncomplete="dialogoEliminarHorma.show()" />                  
                            <p:separator  />
                            <p:commandButton  ajax="false" type="push" title="Imprimir" icon="ui-icon-print" />
                        </p:toolbarGroup>
                    </p:toolbar>

                </p:panel>
            </h:form>   
        </ui:define>  
        <ui:define name="body">    
            <p:panel id="panelConsultarHorma"  style="font-size: 12px; border-width: 0px">                   
                <p:tabView orientation="top" style=" top: 14px;position: absolute; width: 97%" >
                    <p:tab id="tabHorma" title="Horma (#{hormaWeb.tablaDatosHorma.size()} coincidencias)"  titleStyle="font-size: 12px;"   >
                        <h:panelGrid columns="1" cellpadding="1"  >
                            <h:form id="formTablaConsultarHorma" >
                                <p:dataTable  id="tablaConsultarHorma" var="consultarHorma" value="#{hormaWeb.tablaDatosHorma}" widgetVar="tablaConsultarHorma" 
                                              emptyMessage="Búsqueda finalizada, no existe horma con los criterios de búsqueda ingresados" resizableColumns="false" paginator="true" rows="10"  
                                              rowsPerPageTemplate="5,10,20,100" selectionMode="single" selection="#{hormaWeb.hormaSeleccionado}" rowKey="#{consultarHorma.codhorma}"       >
                                    <p:ajax  event="rowSelect" listener="#{hormaWeb.eventoFilaSeleccionadaTablaConsultarHorma()}" process="@this" update=":formDialogoEliminarHorma" /> 
                                    <p:column id="columnaCodHorma" sortBy="#{consultarHorma.codhorma}" filterBy="#{consultarHorma.codhorma}" headerText="Codigo Horma" filterMatchMode="contains" style="width:25%" >
                                        <h:outputText value="#{consultarHorma.codhorma}"  />
                                    </p:column>
                                    <p:column id="columnaNombreHorma" sortBy="#{consultarHorma.nombrehorma}" filterBy="#{consultarHorma.nombrehorma}" headerText="Horma"  filterMatchMode="contains" style="width:50%" >
                                        <h:outputText value="#{consultarHorma.nombrehorma}"  />
                                    </p:column>
                                    <p:column id="columnaTamanioHorma" sortBy="#{consultarHorma.tamanio}" filterBy="#{consultarHorma.tamanio}" headerText="Tamaño Horma" filterMatchMode="contains" style="width:25%" >
                                        <h:outputText value="#{consultarHorma.tamanio}"  />
                                    </p:column>
                                    <f:facet  name="footer" >
                                        <p:commandButton  id="botonMostrarDatosHorma" type="push" actionListener="#{hormaWeb.mostrarDatosDialogoDatosHorma()}" update=":formDialogoDatosHorma,:formDialogoDatosHorma:tablaDatosHormaDialogo"  oncomplete="dialogoConsultaHorma.show()" value="Mostrar Datos" icon="ui-icon-search"     />
                                    </f:facet>
                                 </p:dataTable>
                            </h:form>
                        </h:panelGrid>
                    </p:tab>
                </p:tabView>                         
            </p:panel>            
            </ui:define>
            <ui:define name="dialogos" >
            <!--Dialogo para ver toda la informacion relacionada con el horma -->                
            <h:form id="formDialogoDatosHorma">
                <p:dialog id="DialogoDatosHorma" header="Datos de la Horma:" widgetVar="dialogoConsultaHorma" resizable="false"  
                            modal="true" style="font-size: 12px"> 
                    <h:panelGrid columns="2" cellpadding="0" style="alignment-adjust: middle">                            
                            <p:dataTable id="tablaDatosHormaDialogo" value="#{hormaWeb.datosHormaSeleccionado}" var="datosSeleccionado" >                                
                                <p:column headerText="" footerText="" style="text-align: right; font-weight: bold">                                    
                                    <h:outputText value="#{datosSeleccionado.substring(0, 13)}" style="font-size: 12px" />                                 
                                </p:column >
                                <p:column headerText="" footerText="" >                                    
                                    <h:outputText value="#{datosSeleccionado.substring(13)}" style="font-size: 12px" />                                 
                                </p:column>                                                                    
                            </p:dataTable>   
                    </h:panelGrid> 
                    <p:separator/>
                    <p:commandButton value="Cerrar" type="button" onclick="dialogoConsultaHorma.hide()"/>
                </p:dialog>
            </h:form>    
            <!--Ingreso Horma -->
            <h:form id="formDialogoIngresarHorma">
                <p:dialog id="DialogoIngresarHorma" header="Ingreso de Nueva Horma:" widgetVar="dialogoIngresoHorma" resizable="false" closable="false"  
                          modal="true" style="font-size: 12px">
                    <h:panelGrid columns="2" >
                        <p:panel style="width: 99px; height: 135px; ">
                            <h:outputText style="vertical-align: middle;text-align: right; height: 20px; width: 95px;left: 20px; top: 25px; position: absolute ; font-size: 12px" value="Horma Código:"/>
                            <h:outputText style="vertical-align: middle;text-align: right; height: 20px; width: 95px;left: 20px; top: 55px; position: absolute; font-weight: bold; font-size: 12px "  value="* Horma:"/>                    
                            <h:outputText style="vertical-align: middle;text-align: right; height: 20px; width: 95px;left: 20px; top: 85px; position: absolute; font-weight: bold; font-size: 12px "  value="* Tamaño:"/>
                        </p:panel>
                        <p:panel  style="width: 255px; height: 100px; border-width: 0px" >
                            <p:inputText id="textCodHorma"  disabled="true" style="width: 150px; font-size: 12px;left: 124px; top: 20px; position: absolute ; "/>
                            <p:inputText id="textNombreHorma"  requiredMessage="Ingrese el nombre de horma" style="width: 235px; font-size: 12px;left: 124px; top: 50px; position: absolute; "/>
                            <p:inputText id="textTamanioHorma" requiredMessage="Ingrese el tamaño de horma" style="width: 150px; font-size: 12px;left: 124px; top: 80px; position: absolute; " title="Ejemplo: (6) ó (6 1/2)"/>                             
                            <p:separator style="left: 124px; top: 105px; position: absolute; width: 245px" />
                            
                            <!--p:commandButton id="botonIngresarNuevaHorma" ajax="true" type="Submit" value="Guardar" actionListener="{hormaWeb.clicBotonIngresarHorma()}" update=":formTablaConsultarHorma"   style="font-size: 12px ;left: 124px; top: 118px; width: 120px; position: absolute" icon="ui-icon-disk"/-->
                            <p:commandButton id="botonIngresarNuevaHorma" value="Guardar" type="push" ajax="true" rendered="true" actionListener="#{hormaWeb.clicBotonIngresarHorma('formDialogoIngresarHorma')}" update=":panelConsultarHorma" style="font-size: 12px ;left: 124px; top: 118px; width: 120px; position: absolute" icon="ui-icon-disk"/>                            
                            <p:commandButton id="botonCancelarIngresarNuevaHorma" value="Cancelar" type="push"       actionListener="#{hormaWeb.clicBotonResetearIngresarHorma()}"  update=":panelConsultarHorma" oncomplete="dialogoIngresoHorma.hide()" style="font-size: 12px ;left: 250px; top: 118px; position: absolute; width: 120px" icon="ui-icon-close" />
                        </p:panel>
                    </h:panelGrid>
                </p:dialog> 
            </h:form> 
            <!--Modificacion Horma --> 
            <h:form id="formDialogoModificarHorma">
                <p:dialog id="DialogoModificarHorma" header="Modificación de Horma:" widgetVar="dialogoModificarHorma" resizable="false" closable="false"  
                          modal="true" style="font-size: 12px">
                    <h:panelGrid columns="2" >
                        <p:panel style="width: 99px; height: 135px; ">
                            <h:outputText style="vertical-align: middle;text-align: right; height: 20px; width: 95px;left: 20px; top: 25px; position: absolute ; font-size: 12px" value="Horma Código:"/>
                            <h:outputText style="vertical-align: middle;text-align: right; height: 20px; width: 95px;left: 20px; top: 55px; position: absolute; font-weight: bold; font-size: 12px "  value="* Horma:"/>                    
                            <h:outputText style="vertical-align: middle;text-align: right; height: 20px; width: 95px;left: 20px; top: 85px; position: absolute; font-weight: bold; font-size: 12px "  value="* Tamaño:"/>
                        </p:panel>
                        <p:panel style="width: 255px; height: 100px; border-width: 0px" >
                            <p:inputText id="textCodHormaModificar" disabled="true" style="width: 150px; font-size: 12px;left: 124px; top: 20px; position: absolute ; "/>
                            <p:inputText id="textNombreHormaModificar" disabled="true" requiredMessage="Ingrese el nombre de horma" style="width: 235px; font-size: 12px;left: 124px; top: 50px; position: absolute; "/>
                            <p:inputText id="textTamanioHormaModificar" requiredMessage="Ingrese el tamaño de horma" style="width: 150px; font-size: 12px;left: 124px; top: 80px; position: absolute; " title="Ejemplo: (6) ó (6 1/2)"/>                             
                            <p:separator style="left: 124px; top: 105px; position: absolute; width: 245px" />
                            <!--p:commandButton id="botonActualizarDatosHorma" ajax="true" type="Submit" value="Actualizar" actionListener="{hormaWeb.clicBotonActualizarDatosHorma()}"  update=":formTablaConsultarHorma" style="font-size: 12px ;left: 124px; top: 118px; width: 120px; position: absolute" icon="ui-icon-disk"/-->
                            <p:commandButton id="botonActualizarDatosHorma" ajax="true" type="Submit" value="Actualizar" actionListener="#{hormaWeb.clicBotonActualizarDatosHorma()}" update=":panelConsultarHorma" style="font-size: 12px ;left: 124px; top: 118px; width: 120px; position: absolute" icon="ui-icon-disk"/>
                            <p:commandButton id="botonCancelarActualizarDatosHorma" value="Cancelar" type="push"       actionListener="#{hormaWeb.clicBotonResetearIngresarHorma()}"  update=":panelConsultarHorma" oncomplete="dialogoModificarHorma.hide()" style="font-size: 12px ;left: 250px; top: 118px; position: absolute; width: 120px" icon="ui-icon-close" />
                        </p:panel>
                    </h:panelGrid>
                </p:dialog> 
            </h:form> 
            <!--Eliminacion Horma -->    
            <h:form id="formDialogoEliminarHorma"> 
                <p:confirmDialog message="Seguro desea eliminar la siguiente Horma:" header="Eliminación de Hormas" severity="alert" 	
                     widgetVar="dialogoEliminarHorma" closable="false"  style="font-size: 12px">       
                    <h:panelGrid columns="2" cellpadding="1" > 
                        <h:outputText value="Horma Código:" style="font-size: 12px; font-weight: bold"/>
                        <h:outputText value="#{hormaWeb.hormaActualizarDatos.codhorma}" style="font-size: 12px; font-weight: bold"/>            
                        <h:outputText value="" style="font-size: 12px; color: white"/>
                        <h:outputText value="#{hormaWeb.hormaActualizarDatos.nombrehorma}" style="font-size: 12px; font-weight: bold"/>            
                        <h:outputText value="" style="font-size: 12px; color: white"/>            
                        <h:outputText value="#{hormaWeb.hormaActualizarDatos.tamanio}" style="font-size: 12px; font-weight: bold"/>
                        <h:outputText value="" style="font-size: 12px; color: white"/>                        
                    </h:panelGrid>
                    <p:separator  style="height: 0px" />
                    <!--p:commandButton ajax="true" value="Eliminar" actionListener="{hormaWeb.clicBotonEliminarHorma()}"  oncomplete="dialogoEliminarHorma.hide()" process="@all" update="@all" style="font-size: 12px" /-->
                    <p:commandButton ajax="true" value="Eliminar" actionListener="#{hormaWeb.clicBotonEliminarHorma()}" update=":panelConsultarHorma"  oncomplete="dialogoEliminarHorma.hide()"  style="font-size: 12px" />
                    <p:commandButton value="Cancelar" onclick="dialogoEliminarHorma.hide()" type="button" style="font-size: 12px" />         
              </p:confirmDialog>    
          </h:form>                   
            </ui:define>
        </ui:composition>
    </body>
</html>